<template>
  <div>
    <div v-if="showbutton"> <el-button @click="submit()"> 填报</el-button></div>
    <table style="width: 100%" border="1" cellspacing="1">
      <tbody>
        <tr>
          <td colspan="1">俱乐部名称</td>
          <td colspan="4"><input type="text" v-model="dataform.orgName" /></td>
          <td colspan="2">主管单位</td>
          <td colspan="2"><input type="text" v-model="dataform.masterOrgName" /></td>
        </tr>
        <tr>
          <td colspan="1">网站选址</td>
          <td colspan="4"><input type="text" v-model="dataform.intAddress" /></td>
          <td colspan="2">成立时间</td>
          <td colspan="2"><input type="text" v-model="dataform.upTime" /></td>
        </tr>
        <tr>
          <td colspan="1">通讯地址</td>
          <td colspan="4"><input type="text" v-model="dataform.phoneAddress" /></td>
          <td colspan="2">邮政编码</td>
          <td colspan="2"><input type="text" v-model="dataform.postcode" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">俱乐部类型(划“√”)</td>
          <td colspan="2">民办非企业</td>
          <td colspan="2">企业法人</td>
          <td colspan="2">社会团体</td>
          <td colspan="2">其他</td>
        </tr>
        <tr>
          <td colspan="2"><input type="text" v-model="clubTypeid.civilianrun" /></td>
          <td colspan="2"><input type="text" v-model="clubTypeid.firm" /></td>
          <td colspan="2"><input type="text" v-model="clubTypeid.society" /></td>
          <td colspan="2"><input type="text" v-model="clubTypeid.other" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="7">负责人</td>
          <td colspan="1" rowspan="5">总负责人</td>
          <td colspan="2">姓名</td>
          <td colspan="2"><input type="text" v-model="dataform.allResponsibleName" /></td>
          <td colspan="1">固定电话</td>
          <td colspan="2"><input type="text" v-model="dataform.allResponsibleStaticPhone" /></td>
        </tr>
        <tr>
          <td colspan="3" rowspan="4">身份选项(请在相应的选项后划“√”)</td>
          <td colspan="1">法人代表</td>
          <td colspan="2"><input type="text" v-model="allResponsibleJobTypeid.LegalPerson" /></td>
        </tr>
        <tr>
          <td colspan="1">理事长</td>
          <td colspan="2"><input type="text" v-model="allResponsibleJobTypeid.Presidentofacouncil" /></td>
        </tr>
        <tr>
          <td colspan="1">校长</td>
          <td colspan="2"><input type="text" v-model="allResponsibleJobTypeid.rector" /></td>
        </tr>
        <tr>
          <td colspan="1">其他</td>
          <td colspan="2"><input type="text" v-model="allResponsibleJobTypeid.other" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">日常负责人</td>
          <td colspan="2">姓名</td>
          <td colspan="1"><input type="text" v-model="dataform.dayResponsibleName" /></td>
          <td colspan="1">固定电话</td>
          <td colspan="2"><input type="text" v-model="dataform.dayResponsibleStaticPhone" /></td>
        </tr>
        <tr>
          <td colspan="2">手机</td>
          <td colspan="1"><input type="text" v-model="dataform.dayResponsiblePhone" /></td>
          <td colspan="1">电子邮箱</td>
          <td colspan="2"><input type="text" v-model="dataform.dayResponsibleEmail" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">依托单位</td>
          <td colspan="2">单位名称</td>
          <td colspan="5"><input type="text" v-model="dataform.dependOrgName" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">单位性质(划“√”)</td>
          <td colspan="1">普通学校</td>
          <td colspan="2"><input type="text" v-model="dependOrgTypeid.Ordinaryschool" /></td>
          <td colspan="1">场馆、活动中心</td>
          <td colspan="2"><input type="text" v-model="dependOrgTypeid.Sportsschool" /></td>
        </tr>
        <tr>
          <td colspan="1">体育运动学校</td>
          <td colspan="2"><input type="text" v-model="dependOrgTypeid.Traditionalprojectschool" /></td>
          <td colspan="1">企业、公司</td>
          <td colspan="2"><input type="text" v-model="dependOrgTypeid.venue" /></td>
        </tr>
        <tr>
          <td colspan="1">传统项目学校</td>
          <td colspan="2"><input type="text" v-model="dependOrgTypeid.firm" /></td>
          <td colspan="1">协会、社团</td>
          <td colspan="2"><input type="text" v-model="dependOrgTypeid.association" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">管理人员数量</td>
          <td colspan="1">在编</td>
          <td colspan="1">聘用</td>
          <td colspan="3" rowspan="2">营业场地面积(㎡)</td>
          <td colspan="2" rowspan="2"><input type="text" v-model="dataform.acreage" /></td>
        </tr>
        <tr>
          <td colspan="1"><input type="text" v-model="dataform.managementOnNum" /></td>
          <td colspan="1"><input type="text" v-model="dataform.managementOutNum" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">所获级别命名授予时间(年份)</td>
          <td colspan="4">国家级青少年俱乐部</td>
          <td colspan="3"><input type="text" v-model="dataform.getNationYear" /></td>
        </tr>
        <tr>
          <td colspan="4">省级青少年俱乐部</td>
          <td colspan="3"><input type="text" v-model="dataform.getProvinceYear" /></td>
        </tr>
        <tr>
          <td colspan="4">地市级青少年俱乐部</td>
          <td colspan="3"><input type="text" v-model="dataform.getCityYear" /></td>
        </tr>
        <tr>
          <td colspan="4">县级青少年俱乐部</td>
          <td colspan="3"><input type="text" v-model="dataform.getCountyYear" /></td>
        </tr>
        <tr>
          <td colspan="2">年均举办活动(或培训)次数</td>
          <td colspan="2"><input type="text" v-model="dataform.yearActivityNum" /></td>
          <td colspan="2">年均参加人数</td>
          <td colspan="2"><input type="text" v-model="dataform.yearJoinPeopleNum" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="6" @contextmenu.prevent="showProjectContextMenu($event, 0)" style="cursor: pointer">
            <el-tooltip content="右键点击可以新增项目" placement="top" effect="light" :open-delay="500">
              <div>
                项目1
                <i class="el-icon-info" style="color: #909399; margin-left: 2px; font-size: 12px;"></i>
              </div>
            </el-tooltip>
          </td>
          <td colspan="3">项目名称</td>
          <td colspan="4"><input type="text" v-model="dataform.fSheet4bList[0].sportName" /></td>
        </tr>
        <tr>
          <td colspan="3" rowspan="2">在训青少年数量</td>
          <td colspan="2">二级以上(含)</td>
          <td colspan="2">其他</td>
        </tr>
        <tr>
          <td colspan="2"><input type="text" v-model="dataform.fSheet4bList[0].teenagerSecondLevelNum" /></td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet4bList[0].teenagerOtherNum" /></td>
        </tr>
        <tr>
          <td colspan="3" rowspan="2">聘教练员数量</td>
          <td colspan="2">高级以上(含)</td>
          <td colspan="2">初级、中级</td>
        </tr>
        <tr>
          <td colspan="2"><input type="text" v-model="dataform.fSheet4bList[0].coachHighLevelNum" /></td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet4bList[0].coachEarlyCentreLevelNum" /></td>
        </tr>
        <tr>
          <td colspan="3">聘请指导教师数量</td>
          <td colspan="4"><input type="text" v-model="dataform.fSheet4bList[0].teacherNum" /></td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet4bList.slice(1)">
          <tr>
            <td colspan="1" rowspan="6" @contextmenu.prevent="showProjectContextMenu($event, index + 1)"
              style="cursor: pointer">
              <el-tooltip content="右键点击可以新增项目" placement="top" effect="light" :open-delay="500">
                <div>
                  项目{{ index + 2 }}
                  <i class="el-icon-info" style="color: #909399; margin-left: 2px; font-size: 12px;"></i>
                </div>
              </el-tooltip>
            </td>
            <td colspan="3">项目名称</td>
            <td colspan="4"><input type="text" v-model="item.sportName" /></td>
          </tr>
          <tr>
            <td colspan="3" rowspan="2">在训青少年数量</td>
            <td colspan="2">二级以上(含)</td>
            <td colspan="2">其他</td>
          </tr>
          <tr>
            <td colspan="2"><input type="text" v-model="item.teenagerSecondLevelNum" /></td>
            <td colspan="2"><input type="text" v-model="item.teenagerOtherNum" /></td>
          </tr>
          <tr>
            <td colspan="3" rowspan="2">聘请教练员数量</td>
            <td colspan="2">高级以上(含)</td>
            <td colspan="2">初级、中级</td>
          </tr>
          <tr>
            <td colspan="2"><input type="text" v-model="item.coachHighLevelNum" /></td>
            <td colspan="2"><input type="text" v-model="item.coachEarlyCentreLevelNum" /></td>
          </tr>
          <tr>
            <td colspan="3">聘请指导教师数量</td>
            <td colspan="4"><input type="text" v-model="item.teacherNum" /></td>
          </tr>
        </template>
        <tr>
          <td colspan="1" rowspan="10">输送情况</td>
          <td colspan="3">走向种类</td>
          <td colspan="2">以往年度累计人数</td>
          <td colspan="3">上一年度人数</td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">体育系统输送</td>
          <td colspan="2">省队(一线)</td>
          <td colspan="2"><input type="text" v-model="dataform.oneLineAllNum" /></td>
          <td colspan="3"><input type="text" v-model="dataform.oneLineUpNum" /></td>
        </tr>
        <tr>
          <td colspan="2">省级体校(二线)</td>
          <td colspan="2"><input type="text" v-model="dataform.twoLineAllNum" /></td>
          <td colspan="3"><input type="text" v-model="dataform.twoLineUpNum" /></td>
        </tr>
        <tr>
          <td colspan="2">市级体校(三线)</td>
          <td colspan="2"><input type="text" v-model="dataform.threeLineAllNum" /></td>
          <td colspan="3"><input type="text" v-model="dataform.threeLineUpNum" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">教育系统输送</td>
          <td colspan="2">体育院校</td>
          <td colspan="2"><input type="text" v-model="dataform.sportSchoolAllNum" /></td>
          <td colspan="3"><input type="text" v-model="dataform.sportSchoolUpNum" /></td>
        </tr>
        <tr>
          <td colspan="2">普通院校</td>
          <td colspan="2"><input type="text" v-model="dataform.commonSchoolAllNum" /></td>
          <td colspan="3"><input type="text" v-model="dataform.commonSchoolUpNum" /></td>
        </tr>
        <tr>
          <td colspan="2">高校高水平运动队</td>
          <td colspan="2"><input type="text" v-model="dataform.highSchoolAllNum" /></td>
          <td colspan="3"><input type="text" v-model="dataform.highSchoolUpNum" /></td>
        </tr>
        <tr>
          <td colspan="3">部队体工队</td>
          <td colspan="2"><input type="text" v-model="dataform.troopSchoolAllNum" /></td>
          <td colspan="3"><input type="text" v-model="dataform.troopSchoolUpNum" /></td>
        </tr>
        <tr>
          <td colspan="3">就业</td>
          <td colspan="2"><input type="text" v-model="dataform.jobSchoolAllNum" /></td>
          <td colspan="3"><input type="text" v-model="dataform.jobSchoolUpNum" /></td>
        </tr>
        <tr>
          <td colspan="3">其他</td>
          <td colspan="2"><input type="text" v-model="dataform.otherSchoolAllNum" /></td>
          <td colspan="3"><input type="text" v-model="dataform.otherSchoolUpNum" /></td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="12 + additionalNationalRows + additionalProvincialRows + additionalOtherRows - 9">
            参加的活动和获得的荣誉与奖励(自2011年起)</td>
          <td colspan="1" :rowspan="1 + additionalNationalRows">全国性</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <!-- 全国性活动 -->
        <tr v-for="(item, index) in dataform.fSheet4dList.filter(item => item.joinActivityTypeId === 1)"
          :key="`national-${index}`">
          <td colspan="1">
            <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
              <input type="text" v-model="item.joinTime"
                @contextmenu.prevent="showActivityContextMenu($event, index, 'national')" />
            </el-tooltip>
          </td>
          <td colspan="6">
            <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
              <input type="text" v-model="item.result"
                @contextmenu.prevent="showActivityContextMenu($event, index, 'national')" />
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="1 + additionalProvincialRows">省市级</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <!-- 省市级活动 -->
        <tr v-for="(item, index) in dataform.fSheet4dList.filter(item => item.joinActivityTypeId === 2)"
          :key="`provincial-${index}`">
          <td colspan="1">
            <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
              <input type="text" v-model="item.joinTime"
                @contextmenu.prevent="showActivityContextMenu($event, index, 'provincial')" />
            </el-tooltip>
          </td>
          <td colspan="6">
            <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
              <input type="text" v-model="item.result"
                @contextmenu.prevent="showActivityContextMenu($event, index, 'provincial')" />
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="1 + additionalOtherRows">其他活动</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <!-- 其他活动 -->
        <tr v-for="(item, index) in dataform.fSheet4dList.filter(item => item.joinActivityTypeId === 3)"
          :key="`other-${index}`">
          <td colspan="1">
            <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
              <input type="text" v-model="item.joinTime"
                @contextmenu.prevent="showActivityContextMenu($event, index, 'other')" />
            </el-tooltip>
          </td>
          <td colspan="6">
            <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
              <input type="text" v-model="item.result"
                @contextmenu.prevent="showActivityContextMenu($event, index, 'other')" />
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td colspan="1">备注</td>
          <td colspan="8"></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">单位简介</td>
          <td colspan="8" style="height: 60px;"></td>
        </tr>
      </tbody>
    </table>
    <div style="display: flex; justify-content: space-between;">
      <div>填表人：<input type="text" v-model="dataform.writePeople" /></div>
      <div>联系电话：<input type="text" v-model="dataform.writePhone" /></div>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div>填报时间：<input type="text" v-model="dataform.writeTime" /></div>
      <div>填报单位：<input type="text" v-model="dataform.orgName" /></div>
    </div>
    <div v-show="showMenu" :style="menuStyle" class="context-menu">
      <div v-if="currentSection === 'project'" @click="addRow" class="menu-item">新增一个项目</div>
      <div v-if="currentSection === 'project'" @click="deleteRow" class="menu-item">删除这个项目</div>
      <div v-if="currentSection === 'activity'" @click="addRow" class="menu-item">新增一行</div>
      <div v-if="currentSection === 'activity'" @click="deleteRow" class="menu-item">删除这行</div>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
  import {
    insert_update_sheet4
  } from '@/api/statistics.js'
  export default {
    props: {
      Alldata: {
        type: Object,
        default: {}
      },
    },
    data() {
      return {
        showbutton: true,
        dataform: {
          orgName: '',
          masterOrgName: '',
          intAddress: '',
          upTime: '',
          phoneAddress: '',
          postcode: '',
          clubType: '',
          socialOrg: '',
          allResponsibleName: '',
          allResponsibleStaticPhone: '',
          allResponsibleJobType: '',
          dayResponsibleName: '',
          dayResponsiblePhone: '',
          dayResponsibleStaticPhone: '',
          dayResponsibleEmail: '',
          dependOrgName: '',
          dependOrgType: '',
          managementOnNum: '',
          managementOutNum: '',
          acreage: '',
          getNationYear: "",
          getProvinceYear: "",
          getCityYear: "",
          getCountyYear: "",
          yearActivityNum: "",
          yearJoinPeopleNum: "",
          memo: '',
          info: '',
          writePeople: '',
          writeTime: '',
          writePhone: '',
          fSheet4bList: [{
              sportName: '',
              teenagerSecondLevelNum: "",
              teenagerOtherNum: "",
              coachHighLevelNum: "",
              coachEarlyCentreLevelNum: "",
              teacherNum: ""
            },
            {
              sportName: '',
              teenagerSecondLevelNum: "",
              teenagerOtherNum: "",
              coachHighLevelNum: "",
              coachEarlyCentreLevelNum: "",
              teacherNum: ""
            },
            {
              sportName: '',
              teenagerSecondLevelNum: "",
              teenagerOtherNum: "",
              coachHighLevelNum: "",
              coachEarlyCentreLevelNum: "",
              teacherNum: ""
            },
            {
              sportName: '',
              teenagerSecondLevelNum: "",
              teenagerOtherNum: "",
              coachHighLevelNum: "",
              coachEarlyCentreLevelNum: "",
              teacherNum: ""
            }
          ],
          oneLineAllNum: "",
          oneLineUpNum: "",
          twoLineAllNum: "",
          twoLineUpNum: "",
          threeLineAllNum: "",
          threeLineUpNum: "",
          sportSchoolAllNum: "",
          sportSchoolUpNum: "",
          commonSchoolAllNum: "",
          commonSchoolUpNum: "",
          highSchoolAllNum: "",
          highSchoolUpNum: "",
          troopSchoolAllNum: "",
          troopSchoolUpNum: "",
          jobSchoolAllNum: "",
          jobSchoolUpNum: "",
          otherSchoolAllNum: "",
          otherSchoolUpNum: "",
          fSheet4dList: [
            // 全国性活动 (joinActivityTypeId: 1)
            {
              joinActivityTypeId: 1,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 1,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 1,
              joinTime: '',
              result: ''
            },
            // 省市级活 (joinActivityTypeId: 2)
            {
              joinActivityTypeId: 2,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 2,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 2,
              joinTime: '',
              result: ''
            },
            // 其他活动 (joinActivityTypeId: 3)
            {
              joinActivityTypeId: 3,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 3,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 3,
              joinTime: '',
              result: ''
            }
          ]

        },
        // //俱乐部类型 clubType 1民办 2企业 3社会团体 4其他
        clubTypeid: {
          civilianrun: "", //民办
          firm: "", //企业
          society: "", //社会团体
          other: "" //其他

        },
        //总负责人身份 1法人 2理事长 3校长 4其他 allResponsibleJobType
        allResponsibleJobTypeid: {
          LegalPerson: "", //法人
          Presidentofacouncil: "", //理事长
          rector: "", //校长
          other: "", //其他
        },

        //依托单位性质  1普通学校 2体育运动学校 3传统项目学校 4场馆，活动中心 5企业，公司  6协会，社团  dependOrgType
        dependOrgTypeid: {
          Ordinaryschool: "",
          Sportsschool: "",
          Traditionalprojectschool: "",
          venue: "",
          firm: "",
          association: "",
        },
        showMenu: false,
        menuStyle: {
          left: '0px',
          top: '0px'
        },
        currentSection: '',
        currentRowIndex: -1,
        currentActivityType: '', // 用于标识当前操作的活动类型（national/provincial/other）
      };
    },

    //更新数据
    watch: {
      Alldata(newValue, oldValue) {
        // console.log(1111111111111);
        this.dataform = newValue
        // //俱乐部类型 clubType 1民办 2企业 3社会团体 4其他
        if (this.dataform.clubType == 1) {
          this.clubTypeid.civilianrun = '√'
        } else if (this.dataform.clubType == 2) {
          this.clubTypeid.firm = '√'
        } else if (this.dataform.clubType == 3) {
          this.clubTypeid.society = '√'
        } else if (this.dataform.clubType == 4) {
          this.clubTypeid.other = '√'
        }

        //总负责人身份 1法人 2理事长 3校长 4其他 allResponsibleJobType

        if (this.dataform.allResponsibleJobType == 1) {
          this.allResponsibleJobTypeid.LegalPerson = '√'
        } else if (this.dataform.allResponsibleJobType == 2) {
          this.allResponsibleJobTypeid.Presidentofacouncil = '√'
        } else if (this.dataform.allResponsibleJobType == 3) {
          this.allResponsibleJobTypeid.rector = '√'
        } else if (this.dataform.allResponsibleJobType == 4) {
          this.allResponsibleJobTypeid.other = '√'
        }

        //依托单位性质  1普通学校 2体育运动学校 3传统项目学校 4场馆，活动中心 5企业，公司  6协会，社团  dependOrgType

        if (this.dataform.dependOrgType == 1) {
          this.dependOrgTypeid.Ordinaryschool = '√'
        } else if (this.dataform.dependOrgType == 2) {
          this.dependOrgTypeid.Sportsschool = '√'
        } else if (this.dataform.dependOrgType == 3) {
          this.dependOrgTypeid.Traditionalprojectschool = '√'
        } else if (this.dataform.dependOrgType == 4) {
          this.dependOrgTypeid.venue = '√'
        } else if (this.dataform.dependOrgType == 5) {
          this.dependOrgTypeid.firm = '√'
        } else if (this.dataform.dependOrgType == 6) {
          this.dependOrgTypeid.association = '√'
        }



      },
      // dataform(newValue, oldValue) {
      //   this.dataform = newValue
      // },


    },



    methods: {

      showbuut() {
        this.showbutton = false
      },


      submit() {
        // //俱乐部类型 clubType 1民办 2企业 3社会团体 4其他
        if (this.clubTypeid.civilianrun) {
          this.dataform.clubType = 1
        } else if (this.clubTypeid.firm) {
          this.dataform.clubType = 2
        } else if (this.clubTypeid.society) {
          this.dataform.clubType = 3
        } else if (this.clubTypeid.other) {
          this.dataform.clubType = 4
        }
        //总负责人身份 1法人 2理事长 3校长 4其他 allResponsibleJobType

        if (this.allResponsibleJobTypeid.LegalPerson) {
          this.dataform.allResponsibleJobType = 1
        } else if (this.allResponsibleJobTypeid.Presidentofacouncil) {
          this.dataform.allResponsibleJobType = 2
        } else if (this.allResponsibleJobTypeid.rector) {
          this.dataform.allResponsibleJobType = 3
        } else if (this.allResponsibleJobTypeid.other) {
          this.dataform.allResponsibleJobType = 4
        }

        //依托单位性质  1普通学校 2体育运动学校 3传统项目学校 4场馆，活动中心 5企业，公司  6协会，社团  dependOrgType

        if (this.dependOrgTypeid.Ordinaryschool) {
          this.dataform.dependOrgType = 1
        } else if (this.dependOrgTypeid.Sportsschool) {
          this.dataform.dependOrgType = 2
        } else if (this.dependOrgTypeid.Traditionalprojectschool) {
          this.dataform.dependOrgType = 3
        } else if (this.dependOrgTypeid.venue) {
          this.dataform.dependOrgType = 4
        } else if (this.dependOrgTypeid.firm) {
          this.dataform.dependOrgType = 5
        } else if (this.dependOrgTypeid.association) {
          this.dataform.dependOrgType = 6
        }


        // console.log(qs.stringify(this.dataform));
        insert_update_sheet4(this.dataform).then(res => {
          this.$message.success('填报成功')
        })
      },

      showProjectContextMenu(event, index) {
        // 许在任何项目上右键
        this.showMenu = true
        this.currentSection = 'project'
        this.currentRowIndex = index
        this.menuStyle = {
          left: event.clientX + 'px',
          top: event.clientY + 'px'
        }
      },

      addRow() {
        if (this.currentSection === 'project') {
          // 项目添加逻辑
          const newProject = {
            sportName: '',
            teenagerSecondLevelNum: '',
            teenagerOtherNum: '',
            coachHighLevelNum: '',
            coachEarlyCentreLevelNum: '',
            teacherNum: ''
          }
          this.dataform.fSheet4bList.push(newProject)
        } else if (this.currentSection === 'activity') {
          const newActivity = {
            joinActivityTypeId: this.currentActivityType === 'national' ? 1 : this.currentActivityType ===
              'provincial' ? 2 : 3,
            joinTime: '',
            result: ''
          }

          // 根据不同类型在不同位置插入
          let insertIndex = this.currentActivityType === 'national' ? 3 :
            this.currentActivityType === 'provincial' ? 6 : 9

          this.dataform.fSheet4dList.splice(insertIndex, 0, newActivity)
        }
        this.hideContextMenu()
      },

      deleteRow() {
        if (this.currentSection === 'project') {
          // 项目删除逻辑
          if (this.dataform.fSheet4bList.length > 2) {
            this.dataform.fSheet4bList.splice(this.currentRowIndex, 1)
          }
        } else if (this.currentSection === 'activity') {
          // 活动删除逻辑
          const currentTypeId = this.currentActivityType === 'national' ? 1 :
            this.currentActivityType === 'provincial' ? 2 : 3;

          // 获取当前类型的所有活动
          const currentTypeActivities = this.dataform.fSheet4dList.filter(item =>
            item.joinActivityTypeId === currentTypeId
          );

          // 确保至少保留一行
          if (currentTypeActivities.length > 1) {
            // 找到要删除的活动在整个数组中的索引
            const indexToDelete = this.dataform.fSheet4dList.findIndex(item =>
              item === currentTypeActivities[this.currentRowIndex]
            );

            if (indexToDelete !== -1) {
              this.dataform.fSheet4dList.splice(indexToDelete, 1);
            }
          }
        }
        this.hideContextMenu()
      },

      hideContextMenu() {
        this.showMenu = false
      },

      showActivityContextMenu(event, index, type) {
        this.showMenu = true
        this.currentSection = 'activity'
        this.currentActivityType = type
        this.currentRowIndex = index
        this.menuStyle = {
          left: event.clientX + 'px',
          top: event.clientY + 'px'
        }
      }
    },

    mounted() {
      document.addEventListener('click', this.hideContextMenu)
    },

    beforeDestroy() {
      document.removeEventListener('click', this.hideContextMenu)
    },
    computed: {
      additionalNationalRows() {
        return this.dataform.fSheet4dList.filter(item => item.joinActivityTypeId === 1).length
      },
      additionalProvincialRows() {
        return this.dataform.fSheet4dList.filter(item => item.joinActivityTypeId === 2).length
      },
      additionalOtherRows() {
        return this.dataform.fSheet4dList.filter(item => item.joinActivityTypeId === 3).length
      }
    }
  }
</script>

<style>
  table {
    border-collapse: collapse;
    /* //合并为一个单一的边框 */
    border-color: #a2a7ab;
    /* //边框颜色按实际自定义即可 */
    margin-bottom: 10px;
  }

  thead tr th {
    background-color: #f8f8f9;
    /* //设置表格标题背景色 */
    padding: 3px;
    text-align: center;
  }

  tbody tr td {
    padding: 3px;
    text-align: center;
    height: 34px;
    /* //设置单元格最小高度 */
  }

  .context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 0;
    min-width: 120px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    z-index: 9999;
  }

  .menu-item {
    padding: 8px 16px;
    cursor: pointer;
  }

  .menu-item:hover {
    background-color: #f5f7fa;
  }
</style>
